
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<link rel="stylesheet" href="css/category.css" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		<style type="text/css">
			ul li {
				list-style: none;
			}
			
			.add span {
				cursor: pointer;
			}
		</style>
		<script type="text/javascript">
			function show(d1) {
				if(document.getElementById(d1).style.display == 'block') {
					document.getElementById(d1).style.display = 'none'; //触动的层如果处于显示状态，即隐藏
				} else {
					document.getElementById(d1).style.display = 'block'; //触动的层如果处于隐藏状态，即显示
				}
			}
		</script>

	</head>

	<body class="fixed-left">
		<div class="enlarged forced" id="wrapper">
			<div class="content-page">
				<div class="content add">
					<div class=" container-fluid">
						<h4><b><i class="fa fa-sitemap m-r-5"></i>产品分类维护</b></h4>
						<div class="row m-b-20" >
						<el-form :model="ruleForm" class="demo-ruleForm">
							<div class="col-sm-4" style="height: auto;">
							<p class="text-danger">
							<i class="fa fa-exclamation-triangle m-r-5"></i> 本界面仅用于
							<b>产品分类维护</b>。如需<b>新建产品</b>请进入：
							<a class="btn btn-d" href="/glist">产品管理</a>
						</p>
								<p><b>说明:</b>点击产品分类名字，可添加下级分类、改名、删除分类</p>

								<strong @click="insert()">产品分类</strong><i class="el-icon-d-caret"></i>
									<el-tree 
									:data="options" 
									:props="defaultProps"
									 @node-click="handleNodeClick">
									</el-tree>
								<el-dialog :visible.sync="centerDialogVisible"
										width="900px" center> <iframe :src="FrameSrc"
										width="870px" frameborder="0"
										onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = 
										this.contentWindow.document.body.scrollWidth"></iframe>
									</el-dialog>
								<!--树形目录 end-->

							</div>
							</el-form>
							
						</div>
					</div>
					
				</div>
				
			</div>
		</div>
		<script>
			var vm = new Vue({
				el:".add",
				data() {
					return {
						FrameSrc:'',
						centerDialogVisible: false,
						options: [{
				             children: []
				           }],
				           defaultProps: {
				               children: 'children',
				               label: 'label'
				             }
					}
				},
				created:function(){
					this.getcategory();
				},
				methods:{
				      handleNodeClick(data) {
				    	  var id = data.value;
				    	  this.centerDialogVisible= true;
				    	  this.FrameSrc="/categoryAdd?id="+id;
				          console.log(data);
				          console.log("能获取value==cat_id:"+data.value);
				        },
				        
				         insert() {
					    	  var cid = 0;
					    	  this.centerDialogVisible= true;
					    	  this.FrameSrc="/categoryAddOne?id="+cid;
					          console.log(cid);
					          //console.log("能获取value==cat_id:"+data.value);
					        }, 
				        
				      getcategory(){
				    	  var $this=this;
				    	  console.log("产品类别：");
					    	 /* 产品分类 */
								 axios.post("/categoryAll"
				           			).
				           			then(function(v){
				           				var p_id=[];
				           				var cid='';
				           				   v.data.forEach(function(da){
				           					var child=[];
				           					if(da.pid=="0"){
					           			  		p_id.push({"value":da.cat_id,"label":da.cat_name,"children":child});
			           					   		cid=da.cat_id;
				           					} 
				           					v.data.forEach(function(da){
				           						console.log(cid); 
				           						if (cid==da.pid) {
				           							child.push({"value":da.cat_id,"label":da.cat_name});
											   }
				           					});  
				           				});  
				           				  $this.options=p_id; 
				           				console.log($this.options); 
				            	}).catch(function(e){
				           		console.log("产品类别：" +e);
				           	}); 
				      },
				      
				     
				}
			})
		</script>
	</body>

</html>